<template>
  <div class="jbxx">
    <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="customeInput" label-width="80px">
      <el-form-item label="户主姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.prevent="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button style="color: #fff" sfzh="primary" icon="Search" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table class="zylbTable" :highlight-current-row="false" :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column show-overflow-tooltip prop="sfzh" label="身份证号" />
      <el-table-column label="操作" text-align="center">
        <template #default="scope">
          <div style="cursor: pointer" @click="handleXq(scope.row)">查看</div>
          <!-- <el-button link type="primary" @click="handleXq(scope.row)">操作</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      background
      layout="prev, pager, next"
      class="pagination"
      :total="queryParams.total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(['openPanel']);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
import useMapStore from '@/store/modules/map';
const country = ref(useMapStore().szxcCountryText);
const props = defineProps({
  rylb: {
    type: String,
    default: ''
  }
});
const dataOss = reactive<any>({
  // formOss: { ...initFormOssData },
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 8,
    total: 0,
    name: ''
  }
});
const handleCurrentChange = (e) => {
  queryParams.value.pageNum = e;
  init(false);
};
const { queryParams } = toRefs(dataOss);
const handleQuery = () => {
  init(true);
};
const handleXq = (row) => {
  emit('openPanel', row);
  console.log('row', row);
};
const tableData = ref([]);
const init = async (flag) => {
  if (flag) {
    queryParams.value.pageNum = 1;
  }
  const params = {
    'ssc': country.value,
    'rylb': props.rylb,
    ...queryParams.value
  };
  const data = await $szxcapi.ryxxQuery(params);
  tableData.value = data.rows;
  queryParams.value.total = data.total;
};
onMounted(async () => {
  await nextTick();
  init(true);
});
watch(
  () => useMapStore().szxcCountryText,
  (value) => {
    country.value = value;
    init(true);
  }
);
watch(
  () => props.rylb,
  (value) => {
    init(true);
  }
);
</script>
<style lang="scss" scoped>
.el-form {
  .el-form-item {
    margin-right: 10px;
    :deep(.el-form-item__label) {
      color: #91c5f6;
      font-size: 15px;
    }
  }
}
.el-button {
  background: linear-gradient(0deg, #09548d 0%, #0491ce 52%, #035ba8 100%);
  border-radius: 2px;
  border: 1px solid;
  border-image: linear-gradient(85deg, #39b6ff, #3faeff) 10 10;
}

.customeInput {
  .el-input {
    // width: 200px;
    flex: 1;
  }
  :deep(.el-input__wrapper) {
    background: transparent;
    box-shadow: 0 0 0 1px #185688 inset;
    .el-input__inner::placeholder {
      color: #87a4bf;
    }
    .el-input__inner {
      color: #87a4bf;
    }
  }
}

.el-pagination {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.zylbTable,
::v-deep.el-table {
  background-color: transparent;
  thead,
  tr,
  th.el-table__cell {
    text-align: center;
    color: #91c5f6;
    padding: 0;
    background-color: #178af01a !important;
    border: 0px;
  }
  thead {
    th.el-table__cell {
      color: #cae9ff;
      background: rgba(23, 138, 240, 0.27) !important;
    }
  }

  .el-table__body {
    .el-table__cell {
      cursor: pointer !important;
      text-align: center;
      border-bottom: none;
    }
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent !important;
  }

  .el-table__inner-wrapper:before {
    background-color: transparent !important;
  }

  tr.sz-row {
    background-color: #3d7e93 !important;

    &:hover {
      background-color: #3d7e93 !important;
    }
  }
}
</style>
